/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Toast, Modal} from 'antd-mobile'
import {getOrderList} from '../../actions/paySuccessActions'
import {OrderList, SelectPayMent} from '../../components/payment'
// import '../../../styles/payment.scss'
import style from './index.scss'
import UrlOperation from '../../../../../../js/utils/urlOperation'
// import UrlOperation from '../../utils/urlOperation'
import BackMeanSure from '../../../../../../js/utils/backMeanSure';
import common from '../../../../../../js/utils/common'

const alert = Modal.alert;

class PaySuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {}
		this.chargeOrderId = new UrlOperation().getUrlParam('chargeOrderId') 
		this.payType = new UrlOperation().getUrlParam('payType')
		this.backMeanSureInstance = new BackMeanSure(this.goHome.bind(this), 'paysuccess');
	}

	//返回首页
	goHome() {
        history.pushState({}, '', '');
        let backNumber = -1 * history.length + 1;
        history.go(backNumber);
	}

	componentWillMount() {
	}

	componentDidMount() {
		common.setViewTitle('支付成功');
		this.backMeanSureInstance.bindBackMeansure();
		let postData = {
			chargeOrderId: this.chargeOrderId,
			payType: this.payType
		}
		this.props.dispatch(getOrderList(postData,(resultData)=>{
			
		}))
	}

	componentWillUnmount() {
	}

	toUrl(url) {
		this.context.router.replace(url);
	}

	render() {
		// console.log(this.props.orderList)
		// let orderViolationList = this.props.orderDetail.orderViolationList;

		// let itemTitle = "";
		// 	itemTitle += orderViolationList[0].carNumber + "，" + orderViolationList[0].locaitonName;

		// if (orderViolationList.length > 1) {
		// 	itemTitle += "等地";
		// }
		// itemTitle += "违章";
		// itemTitle.replace(null,'')
		
		return (
			<div className={style.paySuccess}>
				<div className={style.payState}>
					<img className={style.img} src="./images/icon-success.png" alt=""/>
					<div className={style.title}>支付成功</div>
					<div className={style.message}>已下单的用户请勿私下重复处理违章，否则因此导致的重复缴款损失将自行承担；导致差异罚款及产生滞纳金的罚单由客服通知补齐； 违章办理周期一般是2-7个工作日 </div>
				</div>
				<div style={{height: '.24rem'}}></div>
				{
					this.props.orderList&&this.props.orderList.map((item,index) =>{
						return <div key={index} className={style.orderList} onClick={()=>{this.toUrl(`orderDetail/${item.orderId}/${this.chargeOrderId}`)}}>
							<div className={style.carMessage}>
								{item.orderTitle}
							</div>
							<div className={style.payDetail}>
								订单详情
								<img src="./images/go.png" alt=""/>
							</div>
						</div>
					})
				}
			</div>
		)
    }
}

//使用context
PaySuccess.contextTypes = {
    router: React.PropTypes.object.isRequired
};

// PaySuccess.defaultProps = {
// 	orderList: {
// 	}
// };

function mapStateToProps(state) {
    return Object.assign({}, state.paySuccessInfo);
}

export default connect(mapStateToProps)(PaySuccess);
